<template>
  <div class="login-page min-vh-100 d-flex align-items-center">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
          <div class="card login-card shadow-lg transform transition-all duration-300 hover:shadow-xl">
            <div class="card-body p-5">
              <!-- 品牌标识 -->
              <div class="text-center mb-5">
                <router-link to="/" class="text-decoration-none">
                  <h2 class="text-primary fw-bold">
                    <i class="fas fa-globe-americas me-2"></i>
                    探索世界
                  </h2>
                </router-link>
                <p class="text-muted">登录您的账户，开启探索之旅</p>
              </div>

              <!-- 登录表单 -->
              <form @submit.prevent="handleLogin" class="space-y-4">
                <!-- 邮箱输入 -->
                <div class="mb-4">
                  <label for="email" class="form-label">邮箱地址</label>
                  <div class="input-group">
                    <span class="input-group-text bg-light border-end-0">
                      <i class="fas fa-envelope text-muted"></i>
                    </span>
                    <input 
                      type="email" 
                      class="form-control border-start-0"
                      :class="{ 'is-invalid': errors.email }"
                      id="email"
                      v-model="loginForm.email"
                      placeholder="请输入邮箱地址"
                      required
                      @blur="validateEmail"
                    >
                    <div v-if="errors.email" class="invalid-feedback d-block">
                      {{ errors.email }}
                    </div>
                  </div>
                </div>

                <!-- 密码输入 -->
                <div class="mb-4">
                  <label for="password" class="form-label">密码</label>
                  <div class="input-group">
                    <span class="input-group-text bg-light border-end-0">
                      <i class="fas fa-lock text-muted"></i>
                    </span>
                    <input 
                      :type="showPassword ? 'text' : 'password'" 
                      class="form-control border-start-0"
                      :class="{ 'is-invalid': errors.password }"
                      id="password"
                      v-model="loginForm.password"
                      placeholder="请输入密码"
                      required
                      @blur="validatePassword"
                    >
                    <button 
                      class="btn btn-outline-secondary border-start-0" 
                      type="button"
                      @click="showPassword = !showPassword"
                      aria-label="切换密码可见性"
                    >
                      <i :class="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
                    </button>
                    <div v-if="errors.password" class="invalid-feedback d-block">
                      {{ errors.password }}
                    </div>
                  </div>
                </div>

                <!-- 记住我和忘记密码 -->
                <div class="d-flex justify-content-between align-items-center mb-4">
                  <div class="form-check">
                    <input 
                      class="form-check-input" 
                      type="checkbox" 
                      id="remember" 
                      v-model="loginForm.remember"
                    >
                    <label class="form-check-label" for="remember">记住我</label>
                  </div>
                  <router-link to="/forgot-password" class="text-decoration-none small hover:text-primary transition-colors">
                    忘记密码？
                  </router-link>
                </div>

                <!-- 登录按钮 -->
                <button 
                  type="submit" 
                  class="btn btn-primary w-100 py-2 mb-4 transform transition-all duration-300 hover:scale-[1.02]"
                  :disabled="loading"
                >
                  <span v-if="loading" class="spinner-border spinner-border-sm me-2"></span>
                  {{ loading ? '登录中...' : '登录' }}
                </button>

                <!-- 第三方登录分隔线 -->
                <div class="text-center mb-4">
                  <div class="position-relative">
                    <hr>
                    <span class="position-absolute top-50 start-50 translate-middle bg-white px-3 text-muted small">
                      或使用以下方式登录
                    </span>
                  </div>
                </div>

                <!-- 第三方登录按钮 -->
                <div class="row g-2 mb-4">
                  <div class="col-4">
                    <button 
                      type="button" 
                      class="btn btn-outline-danger w-100 transform transition-all duration-300 hover:bg-danger/5" 
                      @click="socialLogin('wechat')"
                    >
                      <i class="fab fa-weixin me-2"></i>微信
                    </button>
                  </div>
                  <div class="col-4">
                    <button 
                      type="button" 
                      class="btn btn-outline-primary w-100 transform transition-all duration-300 hover:bg-primary/5" 
                      @click="socialLogin('weibo')"
                    >
                      <i class="fab fa-weibo me-2"></i>微博
                    </button>
                  </div>
                  <div class="col-4">
                    <button 
                      type="button" 
                      class="btn btn-outline-dark w-100 transform transition-all duration-300 hover:bg-dark/5" 
                      @click="socialLogin('github')"
                    >
                      <i class="fab fa-github me-2"></i>GitHub
                    </button>
                  </div>
                </div>

                <!-- 注册链接 -->
                <div class="text-center">
                  <span class="text-muted">还没有账户？</span>
                  <router-link to="/register" class="text-decoration-none ms-2 text-primary hover:underline">
                    立即注册
                  </router-link>
                </div>
              </form>
            </div>
          </div>

          <!-- 注册福利卡片 -->
          <div class="card mt-4 transform transition-all duration-300 hover:shadow-md">
            <div class="card-body text-center py-3">
              <h6 class="mb-2">新用户专属福利</h6>
              <div class="row g-2">
                <div class="col-4">
                  <div class="benefit-item">
                    <i class="fas fa-gift text-primary mb-1"></i>
                    <small class="d-block">注册礼包</small>
                  </div>
                </div>
                <div class="col-4">
                  <div class="benefit-item">
                    <i class="fas fa-star text-warning mb-1"></i>
                    <small class="d-block">会员特权</small>
                  </div>
                </div>
                <div class="col-4">
                  <div class="benefit-item">
                    <i class="fas fa-tags text-success mb-1"></i>
                    <small class="d-block">专属优惠</small>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      loading: false,
      showPassword: false,
      loginForm: {
        email: '',
        password: '',
        remember: false
      },
      errors: {
        email: '',
        password: ''
      }
    }
  },
  methods: {
    // 邮箱验证
    validateEmail() {
      const email = this.loginForm.email.trim()
      this.errors.email = ''
      
      if (!email) {
        this.errors.email = '请输入邮箱地址'
        return false
      }
      
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      if (!emailRegex.test(email)) {
        this.errors.email = '请输入有效的邮箱地址'
        return false
      }
      
      return true
    },
    
    // 密码验证
    validatePassword() {
      const password = this.loginForm.password
      this.errors.password = ''
      
      if (!password) {
        this.errors.password = '请输入密码'
        return false
      }
      
      if (password.length < 6) {
        this.errors.password = '密码长度不能少于6位'
        return false
      }
      
      return true
    },
    
    // 表单整体验证
    validateForm() {
      const isEmailValid = this.validateEmail()
      const isPasswordValid = this.validatePassword()
      return isEmailValid && isPasswordValid
    },
    
    // 处理登录
    async handleLogin() {
      if (!this.validateForm()) {
        return
      }
      
      this.loading = true
      
      try {
        // 调用登录接口
        await this.$store.dispatch('user/login', this.loginForm)
        
        // 记住登录状态
        if (this.loginForm.remember) {
          localStorage.setItem('rememberedEmail', this.loginForm.email)
        } else {
          localStorage.removeItem('rememberedEmail')
        }
        
        // 登录成功跳转
        this.$router.push(this.$route.query.redirect || '/')
        this.$toast.success('登录成功！欢迎回来')
        
      } catch (error) {
        console.error('登录失败:', error)
        // 细化错误提示
        const errorMsg = error.response?.data?.message || '登录失败，请检查邮箱和密码'
        this.$toast.error(errorMsg)
      } finally {
        this.loading = false
      }
    },
    
    // 第三方登录
    socialLogin(provider) {
      const providerNames = {
        wechat: '微信',
        weibo: '微博',
        github: 'GitHub'
      }
      
      this.$toast.info(`正在跳转到${providerNames[provider]}登录...`)
      
      // 实际项目中这里会处理第三方登录逻辑
      setTimeout(() => {
        this.$store.dispatch('user/login', {
          email: `${provider}@example.com`,
          remember: false
        }).then(() => {
          this.$toast.success(`${providerNames[provider]}登录成功！`)
          this.$router.push('/')
        })
      }, 1500)
    }
  },
  mounted() {
    // 加载记住的邮箱
    const rememberedEmail = localStorage.getItem('rememberedEmail')
    if (rememberedEmail) {
      this.loginForm.email = rememberedEmail
      this.loginForm.remember = true
    }
  }
}
</script>

<style scoped>
.login-page {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  padding: 20px 0;
}

.login-card {
  border: none;
  border-radius: 20px;
  overflow: hidden;
}

.benefit-item {
  padding: 8px;
  border-radius: 8px;
  background-color: #f8f9fa;
  transition: all 0.3s ease;
}

.benefit-item:hover {
  background-color: #e9ecef;
  transform: translateY(-2px);
}

.input-group-text {
  background-color: #f8f9fa !important;
}

.form-control:focus {
  box-shadow: none;
  border-color: #007bff;
}

.btn-primary {
  background: linear-gradient(45deg, #007bff, #6f42c1);
  border: none;
  border-radius: 10px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,123,255,0.3);
}

.btn-outline-secondary {
  border-color: #dee2e6;
}

.btn-outline-secondary:hover {
  background-color: #f8f9fa;
}

/* 响应式调整 */
@media (max-width: 576px) {
  .card-body {
    padding: 2rem !important;
  }
  
  .benefit-item {
    padding: 6px;
  }
  
  .benefit-item small {
    font-size: 0.75rem;
  }
}
</style>